<template>
  <div>
    <span
        :class="{
          'el-icon-s-fold': !isCollapse,
          'el-icon-s-unfold': isCollapse,
        }"
        class="icon"
        @click="change()"
    ></span>
  </div>
  <span>
    <theme></theme>
  </span>
  <div class="grid-content bg-purple logout">
    <span class="el-icon-switch-button"></span>
    <span @click="onLogOut">安全退出</span>
  </div>
</template>

<script>
import Theme from "@/components/common/Theme";

export default {
  name: "header-bar",
  data() {
    return {
      isCollapse: false
    }
  },
  components: {
    Theme
  },
  methods: {
    change() {
      this.isCollapse = !this.isCollapse
      this.$emit("change", this.isCollapse)
    },
    onLogOut() {
      window.localStorage.removeItem('authorization');//删除指定key的数据
      
      this.$message({
        type: "success",
        message: "成功退出",
      });
      this.isLogin()
    },
    isLogin(){
      if (window.localStorage.getItem('authorization')===null){
        this.$router.push({
          name: 'Login'
        })
      }
    },
  },
  created() {
    this.isLogin();
  }
}
</script>

<style scoped>
.icon {
  cursor: pointer;
  font-size: 30px;
}

.logout {
  color: #3a8ee6;
  cursor: pointer;
}
</style>